/*
 * @Author: tomystery 
 * @Date: 2018-05-15 16:43:45 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-15 17:53:48
 */
import React from 'react'
import { Link } from 'react-router-dom'

import PageTitle from 'component/page-title/index.jsx'
import Pagination from 'util/pagination/index.jsx'

import MUtil from 'util/mm.jsx'
import User from 'service/user-service.jsx'


const _mm = new MUtil()
const _user = new User()
class userList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            firstLoading:true
        }
    }
    componentDidMount() {
        this.loadUserList()
    }
    loadUserList() {
        _user.getUserList(this.state.pageNum).then(res => {
            this.setState(res,()=>{
                this.setState({
                    firstLoading:false
                })
            })
        }, errMsg => {
            _mm.errTips(errMsg);
        });
    }
    changePageNum(pageNum) {
        this.setState({ pageNum: pageNum },()=>{
            this.loadUserList();
        })

    }

    render() {
        let tableList = this.state.list.map((user, index) => {
            return <tr key={index}>
                <td>{user.id}</td>
                <td>{user.username}</td>
                <td>{user.email}</td>
                <td>{user.phone}</td>
                <td>{new Date(user.createTime).toLocaleString()}</td>
            </tr>
        })
        let tableBody = this.state.list.length > 0 ? tableList : <tr  colSpan="5" className='text-center'><td>{this.state.firstLoading ? "正在加载数据..." : "没有找到相应的结果！！"}</td></tr>
        return (
            <div id='page-wrapper'>

                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle title='用户列表' />
                    </div>
                </div>
                <div className='row'>
                    <div className='col-md-12'>
                        <table className='table table-striped table-bordered'>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>电话</th>
                                    <th>注册时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tableBody}

                            </tbody>
                        </table>
                        <Pagination current={this.state.pageNum} total={this.state.total} onChange={(pageNum) => this.changePageNum(pageNum)} />
                    </div>
                </div>


            </div>
        )
    }
}

export default userList